<template>
  <view class="container">
    <view class="recent-news">
      <block
        v-for="(item, index) in news"
        :key="index"
      >
        <view
          class="news-item"
          :data-id="item.id"
          @click="toNewsDetail"
        >
          <view class="news-item-title">
            {{ item.title }}
          </view>
          <view class="news-item-date">
            {{ item.createTime
            }}
          </view>
        </view>
      </block>
      <view
        v-if="!news || !news.length"
        class="empty"
      >
        暂无数据
      </view>
    </view>
  </view>
</template>

<script setup>
import {news} from "../../api/index/recentNews";
export default {
  data(){
    return{
      news:[],
    }
  },
  methods:{
    /**
     * 跳转公告详情页
     * @param e
     */
    toNewsDetail(e){
      uni.navigateTo({
        url: '/pages/index/newsDetail?id=' + e.currentTarget.dataset.id
      })
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(){
  // 加载公告
    news().then(({rows}) => {
      console.log(rows)
      this.news= rows
    })
}

}
</script>

<style scoped lang="scss">
.recent-news {
  background: #fff;
  .news-item {
    padding: 20rpx 20rpx 0 20rpx;
    position: relative;
    &::after {
      content: " ";
      width: 100%;
      height: 2rpx;
      background-color: #e1e1e1;
      left: 20rpx;
      display: block;
      position: absolute;
    }
    .news-item-title {
      font-size: 28rpx;
      text-align: left;
    }
    .news-item-date {
      font-size: 24rpx;
      color: #999;
      text-align: right;
      margin-top: 10rpx;
      margin-bottom: 20rpx;
    }
  }
  .empty {
    display: block;
    padding-top: 200rpx;
    color: #999;
    font-size: 26rpx;
    text-align: center;
  }
}

</style>
